National Center for Supercomputing Applications
A Beginner's Guide to HTML

Character Formatting

You can code individual words or sentences with special styles. There are two types of styles: logical and physical. Logical styles tag text according to its meaning, while  physical styles specify the specific appearance of a section. For example, in the preceding sentence, the words "logical styles'' was tagged as a "definition.'' The same effect (formatting those words in italics), could have been achieved via a different tag that specifies merely "put these words in italics.''  

Physical Versus Logical: Use Logical Styles When Possible

If physical and logical styles produce the same result on the screen, why are there both? We devolve, for a couple of paragraphs, into the philosophy of SGML, which can be summed in a Zen-like mantra: "Trust your browser.''  

In the ideal SGML universe, content is divorced from presentation. Thus, SGML tags a level-one heading as a level-one heading, but does not specify that the level-one heading should be, for instance, 24-point bold Times centered on the top of a page. The advantage of this approach (it's similar in concept to style sheets in many word processors) is that if you decide to change level-one headings to be 20-point left-justified Helvetica, all you have to do is change the definition of the level-one heading in the presentation device (i.e., your World Wide Web browser).  

The other advantage of logical tags is that they help enforce consistency in your documents. It's easier to tag something as <H1> than to remember that level-one headings are 24-point bold Times or whatever. The same is true for character styles. For example, consider the <STRONG> tag. Most browsers render it in bold text. However, it is possible that a reader would prefer that these sections be displayed in red instead. Logical styles offer this flexibility.  

Logical Styles

<DFN> 
   for a word being defined. Typically displayed in italics.
   (NCSA Mosaic is a World Wide Web browser.)

<EM> 
   for emphasis. Typically displayed in italics.
   (Watch out for pickpockets.)

<CITE> 
   for titles of books, films, etc. Typically displayed in italics.
   (A Beginner's Guide to HTML)

<CODE> 
   for snippets of computer code. Displayed in a fixed-width font.
  (The <stdio.h> header file)

<KBD> 
   for user keyboard entry. Should be displayed in a bold fixed-width font, but
   many browsers render it in the plain fixed-width font.
   (Enter passwd to change your password.)

<SAMP> 
   for computer status messages. Displayed in a fixed-width font.
  (Segmentation fault: Core dumped.)

<STRONG> 
   for strong emphasis. Typically displayed in bold.
   (Important) 

<VAR> 
   for a "metasyntactic'' variable, where the user is to replace the variable with
   a specific instance. Typically displayed in italics.
   (rm filename deletes the file.) 

Physical Styles

<B> 
   bold text
 
<I> 
   italic text
 
<TT> 
   typewriter text, e.g. fixed-width font. 

Using Character Tags

To apply a character style, 

 1. Start with <tag>, where tag is the desired character formatting tag, to indicate the beginning of the tagged text. 
 2. Enter the tagged text. 
 3. End the passage with </tag>. 

back to Additional Markup Tags
on to Special Characters
return to Beginner's Guide  Contents.